<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/detailed.css">
    <style>
        .swiper {
            position: relative;
            margin-top: 0.33rem;
            overflow: hidden;
        }

        .swiper-wrapper {
            width: 300%;
            display: flex;
        }

        .swiper img {
            display: block;
            width: 100%;
        }

        .swiper-slide {
            width: 80%;
            text-align: center;
            font-size: 18px;
            background: #fff;
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            transform: scale(1);
        }

        .swiper-pagination-bullet {
            background-color: rgba(0, 0, 0, .3);
        }

        .swiper-pagination-bullet-active {
            background-color: #000;
        }

        .swiper-pagination1 {
            width: 15.2vw;
            height: 7.2vw;
            border-radius: 4vw;
            text-align: center;
            line-height: 7.2vw;
            position: absolute;
            bottom: 2.6667vw;
            left: 77vw;
            z-index: 9;
            background-color: rgba(0, 0, 0, .3);
            color: white;
        }
    </style>
</head>

<body>
    <div id="app">
        <header>
            <a href="./index.html">
                <i class="iconfont icon-zuojiantou"></i>
            </a>
            <p>商品详情页</p>
        </header>
        <div class="main">
            <!-- 轮播图 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in swiperImg">
                        <img :src="item.external_url" width="100%" alt="" />
                    </div>
                </div>

                <div class="swiper-pagination"></div>
                <div class="swiper-pagination1"></div>

                <!--分页器。如果放置在swiper外面，需要自定义样式。-->
            </div>

            <!-- 商品详情名称 -->
            <div class="classify-goods">
                <div class="money">
                    <p><i>￥</i>{{goods_maxPrice}} <del v-if="line_price!=='0.00'">￥{{line_price}}</del></p>
                    <p>已售{{goods_sales}}件</p>
                </div>
                <p class="ellipsis-2">{{name}}</p>
            </div>


            <!-- 保障 -->
            <div class="ensure">
                <div>
                    <p><i class="iconfont icon-duihao"></i>七天无理由退货</p>
                    <p><i class="iconfont icon-duihao"></i>48小时发货</p>
                </div>
                <a style="float:right;"><i class="iconfont icon-arrow-right
                "></i></a>

            </div>

            <!-- 商品评价 -->
            <div class="appraise" v-if="list.length>0">
                <div class="appraise-top ">
                    <p>商品评价({{num}})</p>
                    <p>查看更多<i class="iconfont icon-youjiantou"></i></p>
                </div>
                <div class="appraise-bottom">
                    <div class="conten" v-for="(item) in list">
                        <div>
                            <img :src="item.user.avatar_url" alt="">
                            <p>{{item.user.nick_name}}</p>

                        </div>
                        <p>{{item.content}}</p>
                        <p>{{item.create_time}}</p>
                    </div>
                </div>
            </div>

            <!-- 商品介绍 -->
            <div class="photo">

                <div style="width: 100vw !important;">
                    <p>商品描述</p>
                    <div v-html="content"></div>
                </div>
            </div>
        </div>

        <footer>
            <div class="f_left">
                <a href="./index.html">
                    <i class="iconfont icon-shouye"></i>
                    <p>首页</p>
                </a>
                <a href="#">
                    <i class="iconfont icon-gouwuchekong"></i>
                    <p>分类</p>
                </a>
            </div>
            <div class="f_right">
                <button>
                    <p>加入购物车</p>
                </button>
                <button>
                    <p>立即购买</p>
                </button>
            </div>
        </footer>
    </div>
</body>
<script src="./js/axios.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/vue.js"></script>
<!-- <script src="./js/detailed.js"></script> -->
<script>
    axios.defaults.baseURL = "http://cba.itlike.com/public/index.php?s=/api/";

    const app = new Vue({
        el: "#app",
        data: {
            swiperImg: [],
            name: '',
            line_price: '',
            goods_sales: '',
            goods_maxPrice: '',
            content: '',
            list: [],
            idz: localStorage.getItem('vue-data'),
            num: 0
            // id: 10038
        },
        mounted() {
            this.lun(),
                this.pin()
        },
        methods: {

            // getValue(name) {
            //     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            //     var r = window.location.search.substr(1).match(reg);
            //     if (r != null) return unescape(r[2]);
            //     return null;
            // },
            async lun() {

                // this.id = this.getValue("goodsId")
                const {
                    data: {
                        data: {
                            detail: res
                        }
                    }
                } = await axios.get(`goods/detail&goodsId=${this.idz}`)
                console.log(res)
                this.swiperImg = res.goods_images
                this.name = res.goods_name
                this.line_price = res.line_price_max
                this.goods_maxPrice = res.goods_price_max
                this.goods_sales = res.goods_sales
                this.content = res.content
            },

            async pin() {
                const {
                    data: {
                        data
                    }
                } = await axios.get(`comment/listRows&goodsId=${this.idz}&limit=2`)
                console.log(data)
                this.list = data.list
                this.num = data.total
            }
        },
        computed: {

        },
        watch: {

        }

    })


    // swiper轮播图必要代码
    var mySwiper = new Swiper(".swiper", {
        speed: 300,
        loop: false,
        autoplay: 200,
        autoplay: {
            disableOnInteraction: false,
            delay: 800,
        },
        pagination: {
            el: ".swiper-pagination",
        },
        observer: true,
        observeParents: true
    });
    var mySwiper = new Swiper(".swiper", {
        speed: 300,
        loop: false,
        autoplay: 200,
        autoplay: {
            disableOnInteraction: false,
            delay: 800,
        },
        pagination: {
            el: ".swiper-pagination1",
            type: "fraction",
        },
        observer: true,
        observeParents: true
    });
</script>

</html>